<template>
<div>
  <div>
    <el-form :inline="true" :model="QueryForm" class="demo-form-inline">
      <el-form-item label="姓名查询">
        <el-input v-model="QueryForm.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="UserList"
      style="width: 100%"
      >
      <el-table-column
        prop="uid"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="headImg"
        label="头像">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.imgurl" shape="square"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="password"
        label="密码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="birthday"
        label="生日">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别">
      </el-table-column>
      <el-table-column
        label="角色">
        <!--      多对多展示每个用户拥有的角色-->
        <template slot-scope="scope">
          {{
            scope.row.roleList.map(u => {
              return u.rname
            }).join()
          }}
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button type="primary" @click="updateById(scope.row.uid)">修改</el-button>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button type="primary" @click="del(scope.row.uid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-size="page.pageSize"
      layout="prev, pager, next"
      :total="page.total">
    </el-pagination>
    <el-button @click="addVisible=true">添加</el-button>
  </div>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="addVisible"
      width="60%">
      <el-form ref="userFrom" :model="UserFrom" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="UserFrom.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="UserFrom.password"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker type="date" placeholder="选择日期" v-model="UserFrom.birthday" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="UserFrom.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地区">
          <el-cascader
            v-model="UserFrom.checkedRegion"
            :options="regions"></el-cascader>
        </el-form-item>
        <el-form-item label="角色">
            <el-checkbox v-bind:key="role.rid" v-for="role in roleList" name="rids"
            v-bind:label="role.rid" v-model="UserFrom.rids" v-bind:value="role.rid">{{role.rname}}</el-checkbox>
        </el-form-item>
        <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8000/user/upload/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="UserFrom.imgurl" :src="UserFrom.imgurl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>
        <el-button @click="addUser">添加</el-button>
        <el-button @click="addVisible=false">取消</el-button>
      </el-form>
    </el-dialog>
  </div>
<!--  修改-->
  <div>
    <el-dialog
      title="提示"
      :visible.sync="updateVisible"
      width="60%">
      <el-form ref="form" :model="UserFrom" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="UserFrom.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="UserFrom.password"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker type="date" placeholder="选择日期" v-model="UserFrom.birthday" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="UserFrom.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地区">
          <el-cascader
            v-model="UserFrom.checkedRegion"
            :options="regions"
            ></el-cascader>
        </el-form-item>
        <el-form-item label="角色">
          <el-checkbox v-bind:key="role.rid" v-for="role in roleList" name="rids"
                       v-bind:label="role.rid" v-model="UserFrom.rids" v-bind:value="role.rid">{{role.rname}}</el-checkbox>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8000/user/upload/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="UserFrom.imgurl" :src="UserFrom.imgurl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-button @click="update">修改</el-button>
        <el-button @click="updateVisible=false">取消</el-button>
      </el-form>
    </el-dialog>
  </div>
</div>
</template>

<script>
export default {
  name: 'MainView',
  data () {
    return {
      RoleList: [],
      UserList: [],
      roleList: [],
      addVisible: false,
      updateVisible: false,
      page: {
        currentPage: 1,
        pageSize: 3,
        total: 0
      },
      QueryForm: {
        name: ''
      },
      UserFrom: {
        username: '',
        password: '',
        sex: '',
        birthday: '',
        rids: [],
        checkedRegion: [],
        province: '',
        city: '',
        district: '',
        imgurl: ''
      },
      regions: []
    }
  },
  methods: {
    list: function () {
      this.axios.get('http://localhost:8000/user/list', {
        params: {
          currentPage: this.page.currentPage,
          pageSize: this.page.pageSize,
          name: this.QueryForm.name
        }
      })
        .then((response) => {
          this.UserList = response.data.records
          this.page.total = response.data.total
        })
    },
    // 切换页码
    handleCurrentChange (currentPage) {
      // 修改页码值为当前选中的页码值
      this.page.currentPage = currentPage
      // 执行查询
      this.list()
    },
    addUser: function () {
      alert(this.UserFrom.checkedRegion)
      if (this.UserFrom.checkedRegion.length > 0) {
        this.UserFrom.province = this.UserFrom.checkedRegion[0]
      }
      if (this.UserFrom.checkedRegion.length > 1) {
        this.UserFrom.city = this.UserFrom.checkedRegion[1]
      }
      if (this.UserFrom.checkedRegion.length > 2) {
        this.UserFrom.district = this.UserFrom.checkedRegion[2]
      }
      this.axios.post('http://localhost:8000/user/add', this.UserFrom)
        .then(response => {
          this.$message.info('添加完成')
          this.list()
          this.addVisible = false
        })
    },
    updateById: function (id) {
      this.updateVisible = true
      this.UserFrom = this.UserList.find(x => { return x.uid === id })
      this.UserFrom.rids = this.UserFrom.roleList.map(x => { return x.rid })
      const areaData = new Array(0)
      areaData.push(this.UserFrom.province)
      areaData.push(this.UserFrom.city)
      areaData.push(this.UserFrom.district)
      this.UserFrom.checkedRegion = areaData
    },
    update: function () {
      if (this.UserFrom.checkedRegion.length > 0) {
        this.UserFrom.province = this.UserFrom.checkedRegion[0]
      }
      if (this.UserFrom.checkedRegion.length > 1) {
        this.UserFrom.city = this.UserFrom.checkedRegion[1]
      }
      if (this.UserFrom.checkedRegion.length > 2) {
        this.UserFrom.district = this.UserFrom.checkedRegion[2]
      }
      this.axios.post('http://localhost:8000/user/update', this.UserFrom)
        .then(response => {
          this.$message.info('修改完成')
          this.list()
          this.updateVisible = false
        })
    },
    del: function (uid) {
      this.axios.get('http://localhost:8000/user/del', {
        params: {
          uid: uid
        }
      })
        .then(response => {
          this.$message.info('删除完成')
          this.list()
        })
    },
    handleAvatarSuccess (res, file) {
      this.UserFrom.imgurl = res.raw
      this.imgurl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    onSubmit () {
      this.list()
    }
  },
  created () {
    this.list()
    this.axios.get('http://localhost:8000/role/list')
      .then((response) => {
        this.roleList = response.data
      })
    this.axios.get('http://localhost:8000/area/tree')
      .then((response) => {
        this.regions = response.data
        console.log(response.data)
      })
  }
}
</script>np

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
